<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="请输入编号">
            <el-input v-model="formData.id" placeholder="请输入编号1-1000" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formData.name" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="父目录ID">
            <el-input v-model="formData.categoryId" placeholder="请输入商品的父目录ID" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>


    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="商品编号" width="100" />
        <el-table-column prop="name" label="商品名称" width="120" />
        <el-table-column prop="img" label="商品图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img" alt="" width="40" height="40">
            </template>

        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="90"/>
        <el-table-column prop="seq" label="商品排序" width="90" />
        <el-table-column prop="categoryId" label="父目录ID" width="100" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                    下线
                </el-button>
                <el-button link type="primary" size="small"  @click="EditClick(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination :page-size="pageData.pageSize" :disabled="disabled" background layout="total,prev, pager, next"
        :total="pageData.total" @current-change="CurrentChange" />
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ProductApi} from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
const disabled = ref(false)

const formData = reactive({
    id: "",
    name: '',
   categoryId:0
})
const pageData = reactive({
    total: 0,
    pageSize: 3,
    pageNum: 1
})

const tableData = ref([])

const CallcategoryApi = () => {
    let id = formData.id === "" ? undefined : formData.id
    let name = formData.name === "" ? undefined : formData.name
    let categoryId = formData.categoryId === 0 ? undefined : formData.categoryId
    ProductApi.select.call({ id: id, name: name, categoryId: categoryId, pageNum: pageData.pageNum, pageSize: pageData.pageSize }).then((res: any) => {
        console.log(res);
        tableData.value = res.item
        pageData.total = res.total


    })
}
//钩子函数（生命周期中渲染的关键字） 主要作用是当页面加载的时候立即加载我的数据
onMounted(() => {
    CallcategoryApi()
})

const onSubmit = () => {
    // console.log('submit!')
    CallcategoryApi()
}

const handleClick = (row:any) => {
    ElMessageBox.confirm(
        '您确定要对 '+row.name+ " 下线吗？",
        '警告！',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ProductApi.delete.call({id:row.id}).then(() => { 
                ElMessage({
                    type: 'success',
                    message: '下线成功',
                })
                //更新当前列表数据
                CallcategoryApi()
            })
           
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })

}

const EditClick = (row:any) => { 
    // console.log(row);
    router.push({ name: "product-edit", query: {id:row.id} })
}
//点击页码 获取页面的编号 并进行页面数据更新
const CurrentChange = (val: number) => {
    //console.log(`current page: ${val}`)
    pageData.pageNum = val
    //调用列表函数
    CallcategoryApi()
}
</script>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 166px;
}
</style>